<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-jQuery基本选择器</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 将所有的 p 标签隐藏
            $("button").eq(0).click(function () {
                $("p").hide();
            });

            // 将 id="box" 的标签修改样式
            $("button").eq(1).click(function () {
                $("#box").css(
                    {
                        fontSize:"50px",
                        color:"red"
                    }
                )
            });

            // 将 class=c 的标签修改样式
            $("button").eq(2).click(function () {
                $(".c").css(
                    {
                        fontSize:"50px",
                        color:"red",
                        fontWeight:"bolder"
                    }
                )
            });

            // 隐藏所有的标签
            $("button").eq(3).click(function () {
                $("*").hide();
            });
        });
    </script>
</head>
<body>
<p>段落1</p>
<p id="box">段落2</p>
<p class="c">段落3</p>
<button>点我隐藏段落</button>
<button>点我修改id=box的样式</button>
<button>点我修改class=c的样式</button>
<button>点我隐藏所有的标签</button>
</body>
</html>